<template>
  <div>
    <div class="content">
      <div class="analysis-title">数字标准</div>
      <div class="app-tabs">
        <div class="flex">
          <div
            @click="handleTabs(index)"
            v-for="(item, index) in tabsList"
            :key="index"
            class="app-tabs-item"
            :class="{ 'app-tabs-active': index == activeTab }"
          >
            {{ item }}
          </div>
        </div>
        <div @click="handleExport" class="flex flex-ai-center pointer">
          <img src="@/assets/images/analysis/export.png" alt="" class="app-tabs-img" />
          <div class="app-tabs-title">导出</div>
        </div>
      </div>
    </div>
    <div class="analysis-scrollbar">
      <div v-if="activeTab == 0">
        <div v-if="props.content" v-html="props.content"></div>
        <empty v-else />
      </div>
      <div v-else>
        <el-collapse @change="handleChange" v-if="collapseList && collapseList.length > 0" v-model="activeNames">
          <el-collapse-item v-for="item in collapseList" :key="item.indexId" :name="item.indexId">
            <template #title="{ isActive }">
              <div class="flex flex-ai-center">
                <div class="collapse-circle"></div>
                <div class="f-16 collapse-title" :class="isActive ? 'c-primary' : 'c-33'">{{ item.title }}</div>
              </div>
            </template>
            <div v-html="item.content" class="bxcjx-content-wrap"></div>
          </el-collapse-item>
        </el-collapse>
        <empty v-else />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getAnalysisSectionInfo, exportData } from '@/api/analysis';

  const { proxy } = getCurrentInstance();

  const props = defineProps({
    content: {
      type: String,
      default: '',
    },
    selectItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  const tabsList = ref(['全文', '表格', '图片', '公式']);
  const activeTab = ref(0);
  const activeNames = ref('1');
  const collapseList = ref([]);

  const handleTabs = index => {
    if (index != activeTab) {
      activeTab.value = index;
      if (index != 0 && props.selectItem && props.selectItem.id) {
        getAnalysisSectionInfo({ fileId: props.selectItem.id, type: index }).then(res => {
          let data = res.data;
          if (data && data.length > 0) {
            data.forEach(item => {
              if (item.content && item.content.length > 0) {
                item.content = item.content
                  .map(contentItem => {
                    return '<div class="bxcjx-content-list">' + contentItem + '</div>';
                  })
                  .join('');
              }
            });
          }
          collapseList.value = data || [];
        });
      }
    }
    setTimeout(() => {
      MathJax.typesetPromise();
    }, 100);
  };

  const handleScrollToTop = id => {
    nextTick(() => {
      let element = document.querySelector('.bxcjx-content-wrap');
      if (element) {
        element.scrollIntoView({
          behavior: 'smooth',
          block: 'start',
        });
      }
    });
  };

  const handleScrollTo = id => {
    nextTick(() => {
      let element = document.getElementById('t-' + id);
      if (element) {
        element.scrollIntoView({
          behavior: 'smooth',
        });
      }
    });
  };

  const handleChange = val => {
    nextTick(() => {
      MathJax.typesetPromise();
    });
  };

  const handleExport = async () => {
    if (!props.selectItem || !props.selectItem.id) {
      proxy.$modal.msgWarning('请选择标准文件');
      return;
    }

    try {
      const res = await exportData({ id: props.selectItem.id });
      const jsonData = JSON.stringify(res.data, null, 2);
      const blob = new Blob([jsonData], { type: 'application/json;charset=utf-8' });
      const fileName = `标准解析文件_${new Date().getTime()}.json`;
      const link = document.createElement('a');
      const url = URL.createObjectURL(blob);
      link.href = url;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    } catch (error) {
      proxy.$modal.msgError('导出失败，请重试');
    }
  };

  defineExpose({
    handleScrollTo,
    handleScrollToTop,
    activeTab,
    handleTabs,
  });
</script>

<style lang="scss">
  .bxcjx-content-wrap,
  .bxcjx-content-list {
    table {
      border-collapse: collapse;
    }

    table,
    th,
    td {
      border: 1px solid #999;
      padding: 8px;
    }
  }

  .bxcjx-content-wrap {
    line-height: 26px;

    .c-title {
      font-weight: 600;
      font-size: 16px;
      color: #333333;
    }

    img {
      max-width: 100% !important;
      height: auto;
    }
  }

  .bxcjx-content-list {
    margin-top: 20px;

    img {
      display: block;
      max-width: 100% !important;
      height: auto;
    }
  }
</style>
<style lang="scss" scoped>
  .content {
    padding: 24px 15px 0;
    box-sizing: border-box;
    margin-bottom: 20px;

    .app-tabs {
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-img {
        display: block;
        height: 16px;
      }

      &-title {
        font-size: 14px;
        color: $primary-color;
        margin-left: 7px;
      }
    }
  }

  .collapse {
    &-circle {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: $primary-color;
      margin-right: 13px;
    }

    &-title {
      flex: 1;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  }

  :deep(.el-collapse-item__title) {
    width: 30% !important;
    padding: 20px 0;
    box-sizing: border-box;
  }

  :deep(.el-collapse-item:first-child .el-collapse-item__title) {
    padding-top: 0 !important;
  }

  :deep(.el-collapse-item:first-child .el-collapse-item__arrow) {
    margin-bottom: 20px !important;
  }

  :deep(.el-el-tabs__nav) {
    width: 100% !important;
    position: relative;
  }

  :deep(.el-tabs__item.is-top:last-child) {
    position: absolute;
    right: 0;
  }

  :deep(.el-collapse) {
    border-top: none !important;
  }

  :deep(.el-collapse-item__arrow) {
    font-size: 16px !important;
  }

  :deep(.el-collapse-item__arrow.is-active) {
    color: $primary-color !important;
  }

  :deep(.el-collapse-item__header) {
    height: auto !important;
    line-height: normal !important;
    border-bottom: 1px solid var(--el-collapse-border-color);
  }

  :deep(.el-collapse-item__wrap) {
    border-bottom: none !important;
    overflow-x: scroll;

    &::-webkit-scrollbar {
      width: 7px !important;
      height: 7px !important;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #dedfe0 !important;
      border-radius: 10px !important;
    }
  }

  :deep(.el-collapse-item__content) {
    padding-bottom: 20px !important;
  }

  .analysis-scrollbar {
    padding: 0 7px 0 15px;
    box-sizing: border-box;
    height: calc(100vh - 86px - 130px);
  }
</style>
